<template>
    <div class="table-container">
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button
                size="mini"
                @click="add"
                class="btn-add">添加
            </el-button>
        </el-card>
        <div class="table-container">
            <el-table :data="returnReason"
                  :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
                  border
                >
                <el-table-column fixed prop="id" label="编号" width="70" align="center">
                </el-table-column>
                <el-table-column prop="name" label="原因类型" width="180" align="center">
                </el-table-column>
                <el-table-column prop="sort" label="排序" align="center">
                </el-table-column>
                <el-table-column prop="status" label="是否可用"  align="center">
                    <template slot-scope="scope">
                        <el-switch
                        v-model="scope.row.status"
                        @change="handleStatusChange(scope.$index,scope.row)"
                        :active-value="1"
                        :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="添加时间" align="center" :formatter="formatTime">
                </el-table-column>
                <el-table-column fixed="right" prop="operate" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="mod(scope.row)">编辑</el-button>
                        <el-popconfirm
                                title="确定删除吗？"
                                @confirm="del(scope.row.id)"
                                style="margin-left: 5px;">
                            <el-button slot="reference" size="mini">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            <el-dialog title="退货原因"
                :visible.sync="centerDialogVisible"
                width="30%">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="原因类型" prop="name">
                        <el-col :span="20">
                            <el-input v-model="form.name"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-col :span="20">
                            <el-input v-model="form.sort"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="status">
                        <el-col :span="20">
                            <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                        </el-col>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {formatDate} from '@/utils/date';
export default {
    name:"returnReasonList",
    data() {
        return{
            name:'',
            pageSize:10,
            pageNum:1,
            total:0,
            returnReason:[],
            centerDialogVisible:false,
            form:{
                id:0,
                name:null,
                sort:0,
                status:1
            },
            rules: {
                name: [
                    {required: true, message: '请输入原因类型', trigger: 'blur'}
                ],
                sort:[
                    {required: true, message: '请输入排序', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        formatTime(row){
            if(row.createTime==null||row.createTime===''){
                return 'N/A';
            }
            let date = new Date(row.createTime);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        },
        handleStatusChange(index,row){
            let param = new URLSearchParams();
            param.append("status",row.status);
            param.append("id",row.id);
            this.$axios.post(this.$httpUrl+'/returnApply/update/status',param).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$message({
                    message: '状态修改成功',
                    type: 'success'
                    });
                }
            })
            // updateStatus(param).then(response=>{
            // this.$message({
            //     message: '状态修改成功',
            //     type: 'success'
            // });
            // });
        },
        mod(row){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                //赋值到表单
                this.form.id = row.id
                this.form.name = row.name
                this.form.sort = row.sort
                this.form.status = row.status
            })
        },
        add(){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.resetForm()
            })
        },
        resetForm() {
            this.$refs.form.resetFields();  //this.$refs.form：这是Vue中的一种访问子组件实例的方法，$refs是一个特殊的属性，用于访问模板中DOM元素或子组件实例的引用。在这里，form是模板中表单元素的ref属性值。
            //resetFields()：这是Element UI表单组件提供的一个方法，用于重置表单内所有字段到初始状态，包括输入框、选择框等。
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageNum=1
            this.pageSize=val
            this.loadPost()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum=val
            this.loadPost()
        },
        save(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    //检查表单对象form中的name属性是否有值
                    if(this.form.id !== 0){
                        this.doMod();
                    }else{
                        this.doSave();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        doSave(){
            this.$axios.post(this.$httpUrl+'/returnApply/save',this.form).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '操作成功！',
                        type: 'success'
                    });
                    this.centerDialogVisible = false
                    this.loadPost()
                    this. resetForm()
                }else{
                    this.$message({
                        message: '操作失败！',
                        type: 'error'
                    });
                }
            })
        },
        doMod(){
            this.$axios.post(this.$httpUrl+'/returnApply/update',this.form).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '操作成功！',
                        type: 'success'
                    });
                    this.centerDialogVisible = false
                    this.loadPost()
                    this.resetForm()
                }else{
                    this.$message({
                        message: '操作失败！',
                        type: 'error'
                    });
                }
            })
        },
        del(id){
            console.log(id)
            this.$axios.get(this.$httpUrl+'/returnApply/del?id='+id).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '操作成功！',
                        type: 'success'
                    });
                    this.loadPost()
                }else{
                    this.$message({
                        message: '操作失败！',
                        type: 'error'
                    });
                }
            })
        },
        loadPost(){
            this.$axios.post(this.$httpUrl+'/returnApply/listPage',{
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param:{
                    name:this.name
                }
            }).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.returnReason=res.data
                    this.total=res.total
                }else{
                    alert('获取数据失败')
                }
            })
        }
    },
    beforeMount() {
        this.loadPost()
    }
}
</script>